<HEAD>
  <SCRIPT SRC="../ganja.js"></SCRIPT>
</HEAD>
<BODY><SCRIPT>
// Create a Clifford Algebra with 2,0,1 metric. 
Algebra(2,0,1,()=>{
  
  // As in the previous example, points and lines
  // are bivectors and vectors respectively.
  var point = (x,y)=>!(1e0 + x*1e1 + y*1e2),    
      line  = (a,b,c)=>a*1e1 + b*1e2 + c*1e0;
      
  // Distances between elements in 2D PGA (point to point, point to line)
  // Are always calculated as the length of their join. (assuming normalization) 
  var dist = (x,y)=>(x & y).Length;
  
  // Angles between lines in 2D PGA are calculated using the inner product.
  // Again normalized elements are assumed.
  var angle = (x,y)=>Math.acos(x | y);

  // Create three points, one as a function to animate it.
  var A = ()=>point(-1, -0.5*Math.sin(0.0005*performance.now())),  
      B = point(-1, 1), 
      C = point(1, 1); 
  
  // Create the three lines connecting these points and normalize them
  var AB = ()=>(B & A).Normalized, 
      BC = ()=>(C & B).Normalized, 
      CA = ()=>(C & A).Normalized;

  // Distances between points as functions that return labels (strings);
  var AtoB  = ()=>dist(A, B).toFixed(3),  
      BtoC  = ()=>dist(C, B).toFixed(3),     
      CtoA  = ()=>dist(C, A).toFixed(3),
      BtoCA = ()=>dist(B, CA).toFixed(3);

  // Angles between lines as strings (labels for the points)
  var  CAtoAB =()=>angle(CA, AB) * 180 / Math.PI |0 + '&deg;', 
       ABtoBC =()=>angle(BC, AB) * 180 / Math.PI |0 + '&deg;',
       CAtoBC =()=>angle(CA, BC) * 180 / Math.PI |0 + '&deg;';

  // Graph the triangle, its angles and side lengths.
  document.body.appendChild(this.graph([
    "Distances and Angles","Drag the points",       // render title
    0xD0FFE1, [A,B,C],                              // render the triangle
    0x00AA88, AB, AtoB, BC, BtoC, CA, CtoA,         // render edges and lengths.
    0x882288, [B,()=>(B|CA)*CA], BtoCA,             // render projection and dist
    0x224488, A, CAtoAB, B, ABtoBC, C, CAtoBC,      // render verts and angles
  ],{grid:true,lineWidth:3,labels:true,animate:true}));
});
</SCRIPT></BODY>